import React, { memo, useContext } from "react";
import { Tag } from "@nutui/nutui-react";
import useSequentialLoader, {
  LoaderContext,
} from "@/utils/hooks/useSequentialLoader";
import { ChatLoadText, ChatLoadMd, ChatLoadTable } from "../ChatLoadDom";
import "./index.less";

export interface OptCalculateDataType {
  beforeAnalysisContent: string;
  list: any[];
  afterAnalysisContent: string;
}

interface IProps {
  data: OptCalculateDataType;
  loading?: boolean;
  onRender?: (isForce?: boolean) => void;
  onLoad?: () => void;
}

const ChatOptCalculate: React.FC<IProps> = ({ loading, onLoad, onRender }) => {
  // Component State
  const { effectData } = useContext(LoaderContext);
  const columns = [
    {
      title: "位号",
      dataIndex: "tagName",
      key: "tagName",
      render: (record: any) => {
        return record.tagName ? record.tagName : "--";
      },
    },
    {
      title: "位号描述",
      dataIndex: "describe",
      key: "describe",
      render: (record: any) => {
        return record.describe ? record.describe : "--";
      },
    },
    {
      title: "单位",
      dataIndex: "unit",
      key: "unit",
      render: (record: any) => {
        return record.unit ? record.unit : "--";
      },
    },
    {
      title: "上下限",
      dataIndex: "normalOperationRange",
      key: "normalOperationRange",
      render: (record: any) => {
        return record.normalOperationRange ? record.normalOperationRange : "--";
      },
    },
    {
      title: "初始值",
      dataIndex: "initialValue",
      key: "initialValue",
      render: (record: any) => {
        return record.initialValue ? record.initialValue : "--";
      },
    },
    {
      title: "优化值",
      dataIndex: "finalValue",
      key: "finalValue",
      render: (record: any) => {
        return record.finalValue ? record.finalValue : "--";
      },
    },
    {
      title: "变化量",
      dataIndex: "deltaValue",
      key: "deltaValue",
      render: (record: any) => {
        return record.deltaValue ? record.deltaValue : "--";
      },
    },
    {
      title: "相关系数",
      dataIndex: "weight",
      key: "weight",
      render: (record: any) => {
        return record.weight ? record.weight : "--";
      },
    },
  ];
  // Component Effect
  const loadedComponents = useSequentialLoader(
    [
      {
        component: ChatLoadText,
        effectKey: "beforeAnalysisContent",
      },
      {
        component: ChatLoadTable,
        effectKey: "list",
        componentProps: {
          columns: columns,
        },
      },
      {
        component: ChatLoadText,
        effectKey: "afterAnalysisContent",
      },
    ],
    effectData?.optCalResult,
    {
      onLoad: () => {
        onRender && onRender(true);
      },
      onEnd: () => {
        onRender && onRender(true);
        onLoad && onLoad();
      },
    },
    {
      loading: !!loading,
    },
    {
      onRender,
    }
  );
  return <div className="chat-opt-calc">{loadedComponents}</div>;
};

export default memo(ChatOptCalculate);
